//LiuZh 2017-06-25
import React, { Component } from 'react';

import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  Dimensions,
  TouchableWithoutFeedback,
  Animated,
  Easing
} from 'react-native';

import Lotto from '../component/Lotto';


let winWidth = Dimensions.get('window').width;//屏幕宽度


const infoUrl = 'http://115.28.64.94:8080/shequnsiwei/choujiang.do?action=lotteryInfo';


export default class LottorScene extends Component{

	constructor(props){
		super(props);

		this.state = {
			modalVisible: false,
			transY: new Animated.Value(0),
			records: [{
				number: '186****245',
				jp: 'iphone7',
			},{
				number: '186****245',
				jp: '奥迪A6L',
			},{
				number: '186****245',
				jp: 'MacBook Pro',
			},{
				number: '186****245',
				jp: '100元优惠券',
			},{
				number: '186****245',
				jp: '100元优惠券',
			},{
				number: '186****245',
				jp: '100元优惠券',
			}],
			jpList: null,
			lottoVisible: true,
		};
	}

	animStyle = () => ({
    transform:[
        {
          translateY: this.state.transY,
        }
      ]
	});


	render() {
		return(
		<ScrollView
			showsVerticalScrollIndicator={false}>
			<Image style={styles.body}
				source={require('shequnsiweiapp/src/img/background_img_02.png')}
				resizeMode={'stretch'}>
				<Lotto lottoVisible={this.state.lottoVisible}
					data={this.state.jpList}
					ref={(e)=>this.lotto = e}/> 
				<Image style={styles.recordOneLine}
					resizeMode={'contain'}
					source={require('shequnsiweiapp/src/img/cj_04.png')}>
					<View style={styles.recordOneLineBody}>
						<Text style={styles.recordText}>恭喜186****245</Text>
						<Text style={styles.recordText}>抽中</Text>
						<Text style={[styles.recordText,{color: '#F00',}]}>iphone7</Text>
					</View>
				</Image>
				<Image style={styles.recordBody}
					resizeMode={'stretch'}
					source={require('shequnsiweiapp/src/img/record_bg.png')}>
					<View style={styles.recordBox}>
						<Animated.View style={this.animStyle()}>
							<View style={styles.itemBody}>
								<Text style={styles.recordText}>{this.state.records[0].number}</Text>
								<Text style={styles.recordText}>抽中</Text>
								<Text style={[styles.recordText,{color: '#F00',}]}>{this.state.records[0].jp}</Text>
							</View>
							<View style={styles.itemBody}>
								<Text style={styles.recordText}>{this.state.records[1].number}</Text>
								<Text style={styles.recordText}>抽中</Text>
								<Text style={[styles.recordText,{color: '#F00',}]}>{this.state.records[1].jp}</Text>
							</View>
							<View style={styles.itemBody}>
								<Text style={styles.recordText}>{this.state.records[2].number}</Text>
								<Text style={styles.recordText}>抽中</Text>
								<Text style={[styles.recordText,{color: '#F00',}]}>{this.state.records[2].jp}</Text>
							</View>
							<View style={styles.itemBody}>
								<Text style={styles.recordText}>{this.state.records[3].number}</Text>
								<Text style={styles.recordText}>抽中</Text>
								<Text style={[styles.recordText,{color: '#F00',}]}>{this.state.records[3].jp}</Text>
							</View>
							<View style={styles.itemBody}>
								<Text style={styles.recordText}>{this.state.records[4].number}</Text>
								<Text style={styles.recordText}>抽中</Text>
								<Text style={[styles.recordText,{color: '#F00',}]}>{this.state.records[4].jp}</Text>
							</View>
							<View style={styles.itemBody}>
								<Text style={styles.recordText}>{this.state.records[5].number}</Text>
								<Text style={styles.recordText}>抽中</Text>
								<Text style={[styles.recordText,{color: '#F00',}]}>{this.state.records[5].jp}</Text>
							</View>
						</Animated.View>
					</View>
				</Image>
				<TouchableWithoutFeedback
					onPress={()=>{alert('活动规则！')}}>
					<View style={{marginTop: 30,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}}>
						<Image style={{height: 12, width: 12,}}
							resizeMode={'contain'}
							source={require('shequnsiweiapp/src/img/guize.png')}/>
						<Text style={{fontSize: 11, color: '#FFF',marginBottom: 1,marginLeft: 2}}>活动规则</Text>
					</View>
				</TouchableWithoutFeedback>
				<Image source={require('shequnsiweiapp/src/img/bottom_logo.png')}
					resizeMode={'contain'}
					style={{width: 150,height: 25,marginTop: 10,marginBottom: 6}}/>
				<Text style={{fontSize: 10.4, color: '#FFF',marginTop: 6}}>本活动最终解释权归社群思维所有</Text>
				<Text style={{fontSize: 10.4, color: '#FFF',marginTop: 2, marginBottom: 10,}}>本活动与苹果公司无关</Text>
				<TouchableWithoutFeedback
					onPress={this.goJpListScene}>
					<Image source={require('shequnsiweiapp/src/img/my_jp.png')}
						style={styles.myJp}/>
				</TouchableWithoutFeedback>

			</Image>

		</ScrollView>
		);
	}

	goJpListScene=()=>{
		this.props.screenProps.appNavigation.navigate('JpList', {
			data: this.state.jpList,
		});
	}

	componentDidMount(){
		setInterval(this.startTimingMoveAnim, 3000);
		//每隔一分钟获取奖品信息
		this.getInfo();
		console.log('getInfo执行了')
		setInterval(this.getInfo, 60 * 1000);
	}

//获取奖品信息
	getInfo = () => {
		fetch(infoUrl, {
			method: 'POST',
			headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    	},
    	body: JSON.stringify({
        username: 'mobile1',//当前登录的用户
    	})
    }).then((response) => {
    	return response.json();
    }).then((jsonData) => {
			// console.log('奖品信息=======remainPrize>>>>>>'+jsonData.remainPrize);//剩余奖品数
			console.log('奖品信息=======jiangpinList>>>>>>'+jsonData.jiangpinList);//目前undefined
			console.log('奖品信息=======jiangpinList.code>>>>>>'+jsonData.jiangpinList[0].code);
			console.log('奖品信息=======jiangpinList._name>>>>>>'+jsonData.jiangpinList[0]._name);
			console.log('奖品信息=======jiangpinList.unit>>>>>>'+jsonData.jiangpinList[0].unit);
			console.log('奖品信息=======jiangpinList.toal>>>>>>'+jsonData.jiangpinList[0].total);
			console.log('奖品信息=======jiangpinList.remain>>>>>>'+jsonData.jiangpinList[0].remain);
			console.log('奖品信息=======jiangpinList.seq>>>>>>'+jsonData.jiangpinList[0].seq);	 
			console.log('奖品信息=======jiangpinList.version>>>>>>'+jsonData.jiangpinList[0].version);	 
			// console.log('奖品信息=======zhongjiangxinxi>>>>>>'+jsonData.zhongjiangxinxi);//undefined
			// console.log('奖品信息=======enables>>>>>>'+jsonData.enables);//是否在抽奖时间范围
			this.setState({
				// lottoVisible: jsonData.enables == 1 ? true : false,
				jpList: jsonData.jiangpinList,
			});
			setTimeout(this.lotto.setCanPress(true),500);
		}).catch((error)=>{
			console.log(error);
		})
	}

	startTimingMoveAnim = () => {
    this.state.transY.setValue(0);
    Animated.timing(
      this.state.transY,
      {
        toValue: -24,
        duration: 1000,
        easing: Easing.ease,
      }
    ).start(() => {
    	//动画结束重置中奖纪录
    	let newRecords = this.state.records;
    	let temp = newRecords.shift();
    	newRecords.push(temp);
    	this.setState({
    		records: newRecords,
    	});
    	this.state.transY.setValue(0);
    });
  }
}

const styles = StyleSheet.create({
	body: {
		justifyContent: 'flex-end',
		alignItems:'center',
		width: winWidth,
		height: 2.3 * winWidth,
	},
	recordOneLine: {
		height: 77,
		width: 270,
		marginTop: 25,
	},
	recordOneLineBody: {
		paddingLeft: 40,
		position: 'absolute',
		bottom: 20,
		flexDirection: 'row',
	},
	recordBody: {
		height: 160,
		width: 260,
		marginTop: 25,
	},
	recordBox: {
		height: 120,
		marginTop: 33,
		backgroundColor: 'rgba(0,0,0,0)',
	},
	itemBody: {
		height: 24,
		paddingLeft: 6,
		alignItems: 'center',
		flexDirection: 'row',
	},
	recordText: {
		fontSize: 10,
		color: '#000',
		paddingLeft: 14,
	},
	myJp: {
		width: 50,
		height: 50,
		position: 'absolute',
		right: 0,
		top: 0,
	},
});